<!-- ng-mouseenter="vm.show()" ng-mouseleave="vm.hide()" -->
<a href="javascript:;" class="cat-show-box" (click)="toggelElement($event)">
  <span class="cat-show-box-inner" >{{emitData.catName}}</span>
  <i class="fa fa-caret-down  cat-show-box-icon"></i>
</a>

<!-- pc -->
<div *ngIf="!viewMadieControl" class="itemInner itemInnerAll" [hidden]="!menuShowControl" style="left:0px;top:34px;z-index: 109;;" level="1">
  <div class="itemInnerBox" style="overflow-y: auto;overflow-x:hidden;max-height: 520px;padding:10px 0px; ">
    <!-- 一级 -->
    <ul class="service-catgroy" style="box-shadow: none;">
      <li *ngFor="let item of tree" [ngClass]="{'active':item.active}">
        <div class="tree-item">
          <a class="cp tree-item-value" (click)="nodeLick(item,$event)" [title]="item.categoryName">{{item.catName}}</a>
          <a class="right_expand_icon" *ngIf="item.children" (click)="nodeSelected(item,$event)"><i [ngClass]="{'fa':true,'fa-angle-down':item.active,'fa-angle-right':!item.active}"></i></a>
        </div>
        <!-- 二级 -->
        <div class="itemInner" style="z-index: 169;" level="2" [hidden]="!item.active">
          <div class="itemInnerBox">
            <ul class="service-catgroy-item2 service-catgroy">
              <li *ngFor="let item2 of item.children" [ngClass]="{'active':item2.active}">
                <div class="tree-item">
                  <a class="cp tree-item-value" (click)="nodeLick(item2,$event)" [title]="item2.categoryName">{{item2.catName}}</a>
                  <a class="right_expand_icon" *ngIf="item2.children" (click)="nodeSelected(item2,$event)"><i [ngClass]="{'fa':true,'fa-angle-down':item2.active,'fa-angle-right':!item2.active}"></i></a>
                </div>
                <div class="itemInner" style="z-index: 170;" level="3" [hidden]="!item2.active">
                  <div class="itemInnerBox">
                    <!-- 三级 -->
                    <ul class="service-catgroy service-catgroy-item2">
                      <li *ngFor="let item3 of item2.children" [ngClass]="{'active':item3.active}">
                        <div class="tree-item">
                          <a class="cp tree-item-value" (click)="nodeLick(item3,$event)" [title]="item3.categoryName">{{item3.catName}}</a>
                          <a class="right_expand_icon" *ngIf="item3.children" (click)="nodeSelected(item3,$event)"><i [ngClass]="{'fa':true,'fa-angle-down':item3.active,'fa-angle-right':!item3.active}"></i></a>
                        </div>
                        <div class="itemInner" style="z-index: 171;" level="4" [hidden]="!item3.active">
                          <div class="itemInnerBox">
                            <!-- 四级 -->
                            <ul class="service-catgroy service-catgroy-item2">
                              <li *ngFor="let item4 of item3.children" [ngClass]="{'active':item4.active}">
                                <div class="tree-item">
                                  <a class="cp tree-item-value" (click)="nodeLick(item4,$event)" [title]="item4.categoryName">{{item4.catName}}</a>
                                  <a class="right_expand_icon" *ngIf="item4.children" (click)="nodeSelected(item4,$event)"><i [ngClass]="{'fa':true,'fa-angle-down':item4.active,'fa-angle-right':!item4.active}"></i></a>
                                </div>
                                <div class="itemInner" style="z-index: 172;" level="5" [hidden]="!item4.active">
                                  <div class="itemInnerBox">
                                    <!-- 五级 -->
                                    <ul class="service-catgroy-item2 service-catgroy">
                                      <li *ngFor="let item5 of item4.children" [ngClass]="{'active':item5.active}">
                                        <div class="tree-item">
                                          <a class="cp tree-item-value" (click)="nodeLick(item5,$event)" [title]="item5.categoryName">{{item5.catName}}</a>
                                          <a class="right_expand_icon" *ngIf="item5.children" (click)="nodeSelected(item5,$event)"><i [ngClass]="{'fa':true,'fa-angle-down':item5.active,'fa-angle-right':!item5.active}"></i></a>
                                        </div>
                                        <div class="itemInner" style="z-index: 173;" level="6" [hidden]="!item5.active">
                                          <div class="itemInnerBox">
                                            <!-- 六级 -->
                                            <ul class="service-catgroy-item2 service-catgroy">
                                              <li *ngFor="let item6 of item5.children" [ngClass]="{'active':item6.active}">
                                                <div class="tree-item">
                                                  <a class="cp tree-item-value" (click)="nodeLick(item6,$event)" [title]="item6.categoryName">{{item6.catName}}</a>
                                                  <a class="right_expand_icon" *ngIf="item6.children" (click)="nodeSelected(item6,$event)"><i [ngClass]="{'fa':true,'fa-angle-down':item6.active,'fa-angle-right':!item6.active}"></i></a>
                                                </div>
                                              </li>
                                            </ul>
                                          </div>
                                        </div>
                                      </li>
                                    </ul>
                                  </div>
                                </div>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

<!-- phone -->
<div *ngIf="viewMadieControl"  class="itemInner itemInnerAll modelPhone" [hidden]="!menuShowControl" style="left:0px;top:40px;z-index: 109;;" level="1">
  <div class="itemInnerBox" style="overflow-y: auto;max-height: 520px;">
    <!-- 一级 -->
    <ul class="service-catgroy">
      <li *ngFor="let item of tree" [ngClass]="{'active':item.active}">
        <div class="tree-item">
          <a class="cp tree-item-value" (click)="nodeLick(item,$event)" [title]="item.categoryName">{{item.catName}}</a>
          <a class="right_expand_icon" *ngIf="item.children" (click)="nodeSelected(item,$event)"><i  [ngClass]="{'fa':true,'fa-angle-down':item.active,'fa-angle-right':!item.active}"></i></a>
        </div>
        <!-- 二级 -->
        <ul class="service-catgroy-item2 service-catgroy" [hidden]="!item.active">
          <li *ngFor="let item2 of item.children" [ngClass]="{'active':item2.active}">
            <div class="tree-item">
              <a class="cp tree-item-value" (click)="nodeLick(item2,$event)" [title]="item2.categoryName">{{item2.catName}}</a>
              <a class="right_expand_icon" *ngIf="item2.children" (click)="nodeSelected(item2,$event)"><i [ngClass]="{'fa':true,'fa-angle-down':item2.active,'fa-angle-right':!item2.active}"></i></a>
            </div>
            <!-- 三级 -->
            <ul class="service-catgroy service-catgroy-item2" [hidden]="!item2.active">
              <li *ngFor="let item3 of item2.children" [ngClass]="{'active':item3.active}">
                <div class="tree-item">
                  <a class="cp tree-item-value" (click)="nodeLick(item3,$event)" [title]="item3.categoryName">{{item3.catName}}</a>
                  <a class="right_expand_icon" *ngIf="item3.children" (click)="nodeSelected(item3,$event)"><i [ngClass]="{'fa':true,'fa-angle-down':item3.active,'fa-angle-right':!item3.active}"></i></a>
                </div>
                <!-- 四级 -->
                <ul class="service-catgroy service-catgroy-item2" [hidden]="!item3.active">
                  <li *ngFor="let item4 of item3.children" [ngClass]="{'active':item4.active}">
                    <div class="tree-item">
                      <a class="cp tree-item-value" (click)="nodeLick(item4,$event)" [title]="item4.categoryName">{{item4.catName}}</a>
                      <a class="right_expand_icon" *ngIf="item4.children" (click)="nodeSelected(item4,$event)"><i [ngClass]="{'fa':true,'fa-angle-down':item4.active,'fa-angle-right':!item4.active}"></i></a>
                    </div>
                    <!-- 五级 -->
                    <ul class="service-catgroy-item2 service-catgroy" [hidden]="!item4.active">
                      <li *ngFor="let item5 of item4.children" [ngClass]="{'active':item5.active}">
                        <div class="tree-item">
                          <a class="cp tree-item-value" (click)="nodeLick(item5,$event)" [title]="item5.categoryName">{{item5.catName}}</a>
                          <a class="right_expand_icon" *ngIf="item5.children" (click)="nodeSelected(item5,$event)"><i [ngClass]="{'fa':true,'fa-angle-down':item5.active,'fa-angle-right':!item5.active}"></i></a>
                        </div>
                        <!-- 六级 -->
                        <ul class="service-catgroy-item2 service-catgroy" [hidden]="!item5.active">
                          <li *ngFor="let item6 of item5.children" [ngClass]="{'active':item6.active}">
                            <div class="tree-item">
                              <a class="cp tree-item-value" (click)="nodeLick(item6,$event)" [title]="item6.categoryName">{{item6.catName}}</a>
                              <a class="right_expand_icon" *ngIf="item6.children" (click)="nodeSelected(item6,$event)"><i [ngClass]="{'fa':true,'fa-angle-down':item6.active,'fa-angle-right':!item6.active}"></i></a>
                            </div>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>
